<!--
 * @Description: 心里健康申报问卷
 * @Author: Wenmin He
 * @Date: 2021-07-02 17:25:17
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-04 22:44:59
-->
<template>
  <view class="content healthRegistration">
    <view class="content-top" v-if="errTipTxt&&(finishNum < problemList.length)&&currentIndex == problemList.length - 1">
      <view class="content-top-blank"></view>
      <view class="mh-ql-err-tip">
        <view class="mh-ql-err-tip-ic"></view>
        <view class="mh-ql-err-tip-txt">{{ errTipTxt }}</view>
        <view class="mh-ql-err-tip-btn" @click="setErrTip('')"></view>
      </view>
    </view>
    <view class="mh-ql-wrapper">
      <view class="mh-ql-title">健康登记</view>
      <view
        class="mh-ql-group"
        v-for="(itemsObj, idx) in problemList"
        :key="idx"
        v-show="currentIndex === idx"
      >
        <view class="mh-ql-question">{{ idx + 1 }}.{{ itemsObj.name }}</view>
        <view class="mh-ql-answer-list">
          <view
            class="mh-ql-answer-item"
            :class="{'mh-ql-answer-item-active':itemsObj.value === opts.value}"
            v-for="(opts, oIdx) in itemsObj.range"
            :key="oIdx"
            @click="seledMs(idx, opts, itemsObj)"
          >
            <view class="mh-ql-answer-txt">{{ opts.text }}</view>
            <view
              class="mh-ql-answer-status selected"
              v-if="itemsObj.value === opts.value"
            ></view>
            <view class="mh-ql-answer-status" v-else></view>
          </view>
        </view>

        <!-- 输入框 -->
        <view v-if='itemsObj.type=="input" && itemsObj.value==1'>
          <view class='question-title'><view class='is-required' v-if='itemsObj.required'>* </view>{{itemsObj.inputLabel}}</view>
          <uni-easyinput type="text" v-model="itemsObj.inputValue" placeholder="请输入"></uni-easyinput>
        </view>

        <!-- 复选框 -->
        <view v-if='itemsObj.type=="checkBoxOther" && itemsObj.value==1'>
          <uni-data-checkbox multiple v-model="itemsObj.checkBoxValue" :localdata="itemsObj.array" @change="checkBoxOtherChange($event, itemsObj)"></uni-data-checkbox>
          <view v-if="itemsObj.isShowInput">
            <view><view class='is-required'>* </view>{{itemsObj.inputLabel}}</view>
              <uni-easyinput type="text" v-model="itemsObj.inputValue" placeholder="请输入"></uni-easyinput>
            </view>
        </view>

        <!-- 疫苗 -->
        <view v-if='itemsObj.type=="vaccination" && itemsObj.value==1'>
          <view v-for="value in itemsObj.array" :key="value.fieId">
              <view class="vaccination-title"><view class='is-required'>* </view>{{ value.name }}</view>
              <view v-if="value.type == 'time'" class="picker-control">
                <picker mode="date" @change="vaccinesPickerChange($event, value)" :value="value.value" class="picker-control-con-picker">
                  <view class="uni-input picker-content-text">
                    {{
                      value.value == "" || value.value == null || value.value == undefined
                        ? "请选择时间"
                        : value.value
                    }}
                    <view class="picker-content-img"></view>
                  </view>
                </picker>
              </view>
              <view v-if="value.type == 'select'" class="picker-control">
                <picker mode="selector" :range="vaccineCompanys" range-key="label" @change="vaccinesSelectChange($event, value)" :value="value.valueIndex" class="picker-control-con-picker">
                  <view class="uni-input picker-content-text">
                    {{
                      value.value == null || value.value == undefined || value.value == ''
                        ? "请选择厂家"
                        : vaccineCompanysObj[value.value]
                    }}
                    <view class="picker-content-img"></view>
                  </view>
                </picker>
              </view>
            </view>
        </view>
      </view>
      <view class="tongji">
        <view class="tj-head" >
          <view  class="th-item">
            <view class="tj-box"></view>
            <text >已做{{finishNum}}题</text>
          </view>
          <view class="th-item th-item-unwrite">
            <view class="tj-box"></view>
            <text >未做{{problemList.length-finishNum}}题</text>
          </view>
        </view>
        <view class="tj-body" >
          <view class="tj-order"
            :class="{'item-select' : 
              item.finish
            }"
            v-for="(item, k) in problemList" 
            @tap="orderClick(k)"
            :key="item.order">
            {{k+1}}
          </view>
        </view>
      </view>

    </view>
    <view class="report-bottom">
      <view class="mh-ql-count">
        已做题目数{{ finishNum }}/{{ problemList.length }}
      </view>
      <view class="mh-ql-btn-wrapper">
        <view
          class="mh-ql-btn"
          :class="[currentIndex > 0 ?'':'mh-ql-btn-disable']"
          @click="goPrevMs"
        >
          上一题
        </view>
        <view
          v-if="currentIndex == problemList.length - 1"
          class="mh-ql-btn"
          :class="[finishNum === problemList.length ?'':'mh-ql-btn-disable']"
          @click="goNextMs"
        >
          完成
        </view>
        <view
          v-else
          class="mh-ql-btn"
          @click="goNextMs"
        >
          下一题
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { problemList } from "./questionList";
import { mentalHealth } from "@/api";
import { vaccineCompanys } from "@/data";
export default {
  data() {
    return {
      currentIndex: 0,
      finishNum: 0,
      problemList: [],
      ck: true,
      errTipTxt: '部分题目未填写',
      type: 'health',
      vaccineCompanys:vaccineCompanys,
    };
  },
  computed: {
    vaccineCompanysObj() {
      let obj = {};
      this.vaccineCompanys.forEach(t => {
        obj[t.value] = t.label;
      })
      return obj;
    }
  },
  onLoad(e) {
    console.log('personId===', uni.getStorageSync('personInfo').personId);
    // console.log('onLoad=====', problemList)
    console.log('uni.getStorageSync=====', uni.getStorageSync(this.type))
    let health = uni.getStorageSync(this.type) || []
    if(health.length){
      this.problemList = health;
    }else{
      this.problemList = JSON.parse(JSON.stringify(problemList));
    }
    // 判断为男去除有无怀孕
    let {cardId,cardType} = uni.getStorageSync('dataFromUserBaseInfo');
    if(cardType==0 && cardId && cardId.slice(-2,-1)%2 != 0){
      this.problemList.forEach((item,index)=>{
        if(item.fieId == 'isPregnant'){
          this.problemList.splice(index,1);
        }
      })
    }
    // this.watchFinishNum();
  },
  watch:{
    problemList:{
      handler(){
        this.watchFinishNum()
    },
    deep:true //true 深度监听
    }
  },
  methods: {
    watchFinishNum(){
      const retList = this.problemList.filter((item) => {
        if(item.value==0){
          this.$set(item,'finish',true)
          return item.value == 0
        }
        if(item.value==1){
          // 纯单选
          if(!item.type){
            this.$set(item,'finish',item.value != '')
            return item.value != '';
          }
          // 输入框
          if(item.type=='input'){
            this.$set(item,'finish',item.inputValue != '')
            return item.inputValue != '';
          }
          // 复选框 + 输入框
          if(item.type == 'checkBoxOther'){
            if(item.checkBoxValue && item.checkBoxValue.length){
              if(item.checkBoxValue.includes(item.otherValue)){
                this.$set(item,'finish',item.inputValue != '')
                return item.inputValue != '';
              }
              this.$set(item,'finish',true)
              return item.value == 1
            }else{
              this.$set(item,'finish',false)
            }
          }

          // 疫苗
          if(item.type == 'vaccination'){
            if(item.array[0].value && item.array[1].value){
              this.$set(item,'finish',true)
              return item.value != 0
            }else{
              this.$set(item,'finish',false)
            }
          }
        }
        if(item.fieId=='feelingCondition' || item.fieId=='sleepCondition'){
          this.$set(item,'finish',item.value != null)
          return item.value != null;
        }
      });
      this.finishNum = retList.length;
    },
    seledMs(idx, opts, itemObj) {
      console.log('currentIndex', this.currentIndex)
      if (!this.ck) {
        return;
      }
      this.ck = false;
      console.log("idx, opts", idx, opts);
      let problemList = this.problemList;
      problemList.map((item, index) => {
        if (index === idx) {
          item.value = opts.value;
        }
        return item;
      });
      this.problemList = problemList;
      // const retList = this.problemList.filter((itm) => {
      //   return itm.value != null;
      // });
      // console.log('retList====', retList)
      // this.finishNum = retList.length;
      this.$nextTick(()=>{
        this.ck = true;
      })
      if(opts.value==0 || (opts.value==1 && !itemObj.type) || (itemObj.fieId=='sleepCondition' && opts.value!=null) || (itemObj.fieId=='feelingCondition' && opts.value!=null)){
        this.goNextMs()
      }
      // if (this.finishNum === this.problemList.length) {
      //   this.postMs();
      //   return;
      // }
      // if(this.currentIndex<this.problemList.length-1){
      //   this.currentIndex++;
      // }
    },
    goPrevMs() {
      this.currentIndex<=0 ? this.currentIndex=0 : this.currentIndex--;
    },
    goNextMs() {
      if(this.currentIndex<this.problemList.length-1){
        this.currentIndex++;
      }else{
        console.log('最后一题===');
        if (this.finishNum === this.problemList.length) {
          this.postMs();
          return;
        }
      }
      console.log('goNextMs===', this.currentIndex);
    },
    setErrTip(txt) {
      this.errTipTxt = txt
    },
    postMs() {
      console.log('可以提交所有题目答案了======')
      const problemList = this.problemList;
      console.log('存储====', this.type)
      console.log('存储====', problemList)
      uni.setStorage({
        key: this.type, 
        data: problemList
      })
      // uni.redirectTo({
      //   url: `./success?type=${this.type}`,
      // });
      uni.reLaunch({
        url:'/packageIsolate/pages/isolateUser/index'
      })
      return ;
    },
    orderClick (k) {
      this.currentIndex=k;
      uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
      });
    },
    vaccinesSelectChange(e, item, idx) {
      let index = e.detail.value;
      item.valueIndex = index;
      item.value = this.vaccineCompanys[index] ? this.vaccineCompanys[index].value : e.detail.value;
      // this.seledMs(idx, item.options[index]);
    },
    checkBoxOtherChange(e, item) {
      item.isShowInput =
        item.checkBoxValue.indexOf(item.otherValue) === -1 ? false : true;
    },
    vaccinesPickerChange(e, item) {
      item.value = e.detail.value;
    },
  },
};
</script>

<style lang='scss'>
.healthRegistration{
  .uni-easyinput__content{
    border: none!important;
    border-bottom: 1px solid #E4E4E4!important;
    border-radius: 0!important;
  }
}
</style>
<style scoped lang="scss">
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  .content-top{
    position: fixed;
    height: 110rpx;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
    &-blank {
      background-color: #F9F9F9;
      height: 30rpx;
    }
    .mh-ql-err-tip {
      border-top: 1rpx solid #ffd9b4;
      border-bottom: 1rpx solid #ffd9b4;
      background-color: #fff9ed;
      display: flex;
      .mh-ql-err-tip-ic {
        flex: 0 0 84rpx;
        width: 84rpx;
        height: 80rpx;
        background-repeat: no-repeat;
        background-size: 40rpx 32rpx;
        background-position: center center;
        background-image: url(https://szgd-dev.tgovcloud.com/public/images/mentalHealth/tip.png);
      }
      .mh-ql-err-tip-txt {
        flex: 1;
        padding: 20rpx 0;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: #ff6010;
        opacity: 1;
      }
      .mh-ql-err-tip-btn {
        flex: 0 0 84rpx;
        width: 84rpx;
        height: 80rpx;
        background-repeat: no-repeat;
        background-size: 30rpx 30rpx;
        background-position: center center;
        background-image: url(https://szgd-dev.tgovcloud.com/public/images/mentalHealth/del.png);
      }
    }
  }
  
}
.mh-ql-wrapper {
  position: relative;
  padding: 30rpx 0 320rpx;
  box-sizing: border-box;
  background-color: #F9F9F9;
  box-sizing: border-box;
  overflow-y: scroll;
  .mh-ql-title {
    padding: 26rpx 32rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 44rpx;
    border-bottom: 1px solid #f2f2f2;
    background-color: #fff;
  }
  .mh-ql-group {
    padding: 0 32rpx 1rpx 32rpx;
    background-color: #fff;
  }
  .question-title{
    color:#000;
    font-size:26rpx;
  }
  .is-required{
    display:inline-block;
    color:red;
  }
  .mh-ql-question {
    padding: 30rpx 0;
    line-height: 42rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
  }
  .mh-ql-answer-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 23rpx 28rpx 23rpx 30rpx;
    border-radius: 16rpx;
    background-color: #f2f2f2;
    .mh-ql-answer-txt {
      flex: 1;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 42rpx;
    }
    .mh-ql-answer-status {
      flex: 0 0 44rpx;
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
      box-sizing: border-box;
      border: 1rpx solid #707070;
      background-color: #f0f0f0;
      &.selected {
        border: 1rpx solid #2c9af1;
        background-color: #2c9af1;
        background-image: url(https://szgd-dev.tgovcloud.com/public/images/mentalHealth/seled.png);
        background-position: center center;
        background-size: 24rpx 17rpx;
        background-repeat: no-repeat;
      }
    }
  }
  .mh-ql-answer-item-active {
    background: rgba(44, 154, 241, 0.1);
  }
  
  .sub-order {
    width: 90%;
    background-color: #fff;
    margin: 16rpx auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .order-item {
      width: 25%;
      height: 60rpx;
      font-size: 24rpx;
      text-align: center;
      line-height: 60rpx;
      border-bottom: 1rpx solid #eaeaea;
      box-sizing: border-box;
      border-right: 1rpx solid #eaeaea;
    }
    .item-select {
      color: #fff;
      background-color: #13C563;
    }
  }
  .tongji {
    background-color: #fff;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #2C9AF1;
    .tj-head {
      border-bottom: 1rpx solid #F2F2F2;
      display: flex;
      height: 98rpx;
      padding: 0 32rpx;
      align-items: center;
      .tj-box {
        width: 46rpx;
        height: 46rpx;
        background: #2C9AF1;
        opacity: 1;
        border-radius: 3rpx;
        margin-right: 25rpx;
      }
      .th-item {
        display: flex;
      }
      .th-item-unwrite {
        margin-left: 64rpx;
        color: #000;
        .tj-box {
          background: #E2E2E2;
        }
      }
    }
    .tj-body {
      padding: 32rpx;
      display: flex;
      flex-wrap: wrap;
      .tj-order {
        width: 80rpx;
        height: 80rpx;
        background: #E2E2E2;
        opacity: 1;
        color: #000;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 30rpx;
        margin-bottom: 34rpx;
      }
      .item-select {
        background: #2C9AF1;
        color: #fff;
      }
    }
  }
}
.picker-control {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  color: #333333;
  margin-bottom: 10rpx;
  line-height: 100rpx;
  &-title {
    font-weight: 500;
    font-size: 26rpx;

    &-picker {
      margin-top: 20rpx;
      padding: 20rpx 20rpx;
      text-align: center;
      border: 1px solid #f2f2f2;
      border-radius: 8rpx;

      &-date {
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid #f2f2f2;

        .uni-input {
          line-height: 80rpx;
        }
      }

      .uni-input {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 26rpx;
      }
    }
  }

  .picker-content-text {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    position: relative;
    padding-left: 40rpx;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 48rpx;
    .picker-content-img {
      width: 26rpx;
      height: 15rpx;
      background: url("https://szgd-dev.tgovcloud.com/public/images/arr-down.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.report-bottom {
  background-color: #ffffff;
  position: fixed;
  height: 240rpx;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30rpx 32rpx 20rpx;
  font-size:36rpx;
  .mh-ql-count {
    padding: 30rpx 0;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
  }
  .mh-ql-btn-wrapper {
    display: flex;
    padding-bottom: 32rpx;
    justify-content: space-between;
    .mh-ql-btn {
      flex: 0 0 327rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 94rpx;
      border-radius: 16rpx;
      font-size: 34rpx;
      border: 1rpx solid #2c9af1;
      background: #2c9af1;
      color: #ffffff;
      &.mh-ql-btn-disable {
        border: none;
        background: #999999;
        color: #ffffff;
      }
    }
  }
}
</style>
